<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/27 0027
  Time: 23:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>模板管理</title>
    <link rel="stylesheet" href="/gzht/lib/layui/css/layui.css" media="all">
    <style>
        #template_container{
            width: 1200px;
            min-width: 900px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .template_item{
            width: 200px;
            height: 260px;
            border: 1px solid #2F4056;
            border-radius: 3px;
            margin: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-image: url("/gzht/statics/img/moban_icon.png");
            background-repeat: no-repeat;
            background-position: center;
        }
        .template_item:hover{
            cursor: pointer;
            border: 1px solid #5FB878;
        }
        .jh,.time{
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            font-size: 1rem;
            text-align: center;
        }
        .yj_pic{
            width: 200px;
            position: relative;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="template_container">
    <div class="template_item">
        <%--井号--%>
        <div></div>
        <%--日期--%>
        <div></div>
    </div>
</div>
<div id="page" style="position: fixed;bottom: 0px;right: 1rem;"></div>
<script src="/gzht/lib/layui/layui.js"></script>
<script>
    var count = <%= request.getAttribute("count")%>
    layui.use(['laypage','jquery','layer'], function(){
        var laypage = layui.laypage
            ,$ = layui.jquery
            ,layer = layui.layer;

        laypage.render({
            elem: 'page'
            ,count: count
            ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
            ,jump: function(obj){
                console.log(obj)
                var curr = obj.curr;
                var limit = obj.limit;
                $.ajax({
                    url: '/gzht/template/getTemplatesAsPage',
                    data: {
                        start: (curr - 1) * limit,
                        end : curr * limit
                    },
                    success: function (res) {
                        console.log(res)
                        $('#template_container').html('')
                        var templates = res.data;
                        for(var item of templates){
                            var item = '<div class="template_item" data-jh="'+ item.jh +'" data-time="' + item.sjrq + '">' +
                                '        <%--井号--%>' +
                                '        <div class="jh">井号：' + item.jh + '</div>' +

                                '        <%--日期--%>' +
                                '        <div class="time">' + new Date(item.sjrq).toLocaleString() + '</div>' +
                                '    </div>';
                            $('#template_container').append(item);
                        }
                    },
                    error: function (err) {
                        layer.msg("网络出错")
                    }
                })
            }
        });

        $('#template_container').on('click','.template_item',function () {
            var jh = $(this).data('jh');
            var time = $(this).data('time');
            window.location.href = "/gzht/templateEdit?jh="+jh +"&time="+time
        })
    });
</script>
</body>
</html>
